<template>
	<el-card class="layout-query">
		<div class="form">
			<el-form :model="state.queryForm" :inline="true" label-width="80px">
				<el-form-item label="表名称" class="search">
					<el-input v-model="state.queryForm.keyWord" clearable size="default" placeholder="请输入表名称" style="max-width: 180px" />
				</el-form-item>
				<el-form-item class="search">
					<el-button type="primary" size="default" @click="getDataList"> 查询 </el-button>
				</el-form-item>
				<el-form-item>
					<el-button size="default" type="success" @click="openSourceDialog"> 导入 </el-button>
				</el-form-item>
			</el-form>
		</div>
	</el-card>
	<el-card>
		<el-table v-loading="state.dataListLoading" stripe :data="state.dataList" border class="layout-table" @selection-change="selectionChangeHandle">
			<el-table-column type="index" label="序号" width="60" header-align="center" align="center" />
			<el-table-column prop="tableName" label="表名" width="150" header-align="center" align="center" show-overflow-tooltip></el-table-column>
			<el-table-column prop="tableComment" label="表注释" header-align="center" align="center" show-overflow-tooltip> </el-table-column>
			<el-table-column prop="modueName" label="所属模块" header-align="center" align="center" show-overflow-tooltip> </el-table-column>
			<el-table-column prop="createdAt" label="创建时间" header-align="center" align="center" show-overflow-tooltip></el-table-column>
			<el-table-column align="center" label="操作" width="400">
				<template #default="scope">
					<el-button size="small" text type="primary" @click="openEditColumn(scope.row)">修改</el-button>
					<el-button size="small" text type="primary" @click="generateCode(scope.row)">生成代码</el-button>
					<el-button size="small" text type="primary" @click="deleteTable(scope.row.tableName)">删除</el-button>
				</template>
			</el-table-column>
			<template #empty>
				<el-empty description="空空如也" />
			</template>
		</el-table>
		<el-pagination
			:current-page="state.page"
			:page-sizes="state.pageSizes"
			:page-size="state.limit"
			:total="state.total"
			layout="total, sizes, prev, pager, next, jumper"
			@size-change="sizeChangeHandle"
			@current-change="currentChangeHandle"
		>
		</el-pagination>
	</el-card>
	<SourceDialog ref="sourceDialogRef" @refresh="getDataList" />
	<EditDialog ref="editDialogRef" @refresh="getDataList" />
	<confirmGenDialog ref="confirmGenDialogRef" @refresh="getDataList" />
</template>

<script setup lang="ts" name="systemTable">
import { useCrud } from '@/hooks'
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { IHooksOptions } from '@/hooks/interface'
import { prefix } from '@/api/common'
import { tableApi } from '@/api/sys/table'
import SourceDialog from './sourceDialog.vue'
import EditDialog from './editDialog.vue'
import confirmGenDialog from './confirmGenDialog.vue'

const state: IHooksOptions = reactive({
	dataListUrl: `${prefix}/sys/table/genTables`,
	deleteUrl: `${prefix}/sys/table`,
	queryForm: {
		keyWord: ''
	}
})

// 定义变量内容
const sourceDialogRef = ref()
const editDialogRef = ref()
const confirmGenDialogRef = ref()

const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle } = useCrud(state)

const deleteTable = (tableName: string) => {
	tableApi.deleteGentable(tableName).then(() => {
		ElMessage.success('删除成功')
		getDataList()
	})
}

// 打开选择表弹窗
const openSourceDialog = () => {
	sourceDialogRef.value.openDialog()
}
// 打开修改字段弹窗
const openEditColumn = (row: GenTable) => {
	editDialogRef.value.openDialog(row)
}

const checked = ref<boolean | string | number>(false)
const generateCode = (row: GenTable) => {
	confirmGenDialogRef.value.openDialog(row.id)
}
</script>

<style scoped lang="scss">
.system-role-container {
	.system-role-padding {
		padding: 15px;
		.el-table {
			flex: 1;
		}
	}
}
.el-col-9 {
	width: 35% !important;
}
.madd {
	position: relative;
	top: 4px;
}
.form {
	display: flex;
}
.search {
	margin-right: 10px;
}
</style>
